<template>
  <view class="wrapper">
    <!--  TODO 填充数据  -->
    <view class="item-wrapper" v-for="(item,index) in state.pagination.data" :key="index" @tap="onDetail(item.id)">
      <view class="pro-box">
        <view class="pro-box-abso">挂单：{{ item.name }}</view>
        <view class="img-wrapper">
          <image src="@/static/img/home-icon-8.png" mode="aspectFill"></image>
        </view>
        <view class="pro-box-text">
          <view class="pro-box-text-1">米其林汽车轮胎</view>
          <view class="pro-box-text-2">￥{{item.goods_price}} 起</view>
        </view>
      </view>
    </view>
    <s-empty
      v-if="state.pagination.total==0"
      text="这里是空的哦~"
      icon="/static/empty.png"
    />
    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadmore"
    />
  </view>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onMounted, reactive } from 'vue';
  import _ from 'lodash';

  onMounted(async () => {
    getData();
  });
  const state = reactive({
    pagination: {
      data: [],
      current_page: 1,
      total: 0,//待修改
      last_page: 1,
    },
    loadStatus: '',
  });

  async function getData(page = 1, list_rows = 10, keyword) {
    state.loadStatus = 'loading';
    let res = await sheep.$api.brand.marketList({
      list_rows,
      page,
      keyword,
    });
    if (res.code === 1) {
      let orderList = _.concat(state.pagination.data, res.data.data);
      // state.pagination = {
      //   ...res.data,
      //   data: orderList,
      // };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }  // 加载更多
  function loadmore() {
    if (state.loadStatus !== 'noMore') {
      getData(state.pagination.current_page + 1);
    }
  }

  function onDetail(id) {
    sheep.$router.go('/pages/inherit/brandIncubationDetails', { id });
  }
</script>

<style lang="scss" scoped>
  @mixin flex($align-item: center, $justify-content: space-between) {
    display: flex;
    align-items: $align-item;
    justify-content: $justify-content;
  }

  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 30rpx;
  }

  .img-wrapper {
    width: calc((100vw - 80rpx) / 2);
    height: calc((100vw - 80rpx) / 2);

    image {
      width: 100%;
      height: 100%;
    }
  }

  .pro-box {
    background: #1E1E1E;
    border-radius: 20rpx;
    margin-bottom: 22rpx;
    position: relative;
    width: calc((100vw - 80rpx) / 2);


    .pro-box-abso {
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 12rpx;
      //border: 2px solid #ECEBEB;
      background-image: url("@/static/border.png");
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      left: 10rpx;
      top: 10rpx;
      font-weight: 300;
      font-size: 24rpx;
      color: #FFFFFF;
      z-index: 9;
      padding: 0 10rpx;
    }

    .pro-box-text {
      padding: 27rpx 24rpx;

      .pro-box-text-1 {
        font-weight: 400;
        font-size: 26rpx;
        color: #E4E4E4;
      }

      .pro-box-text-2 {
        margin-top: 20rpx;
        font-weight: 400;
        font-size: 28rpx;
        color: #00A1FF;
      }
    }
  }
</style>
